* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#calculator {
  height: 800px;
  width: 460px;
  background-color: rgb(12, 76, 125);
  border-radius: 50px;
}

.inputbox {
  height: 240px;
  display: flex;
  color: white;
  font-size: 40px;
  flex-direction: column;
  /* 文本堆叠排列 */
  align-items: flex-end;
  padding-right: 25px;
  margin-top: 30px;
}

#results {
  font-size: 80px;
  display: flex;
}

.buttons {
  /* gird布局 */
  display: grid;
  /* 第一个参数代表"计数"，第二个参数代表"轨道"：repeat(<count>, <tracks>) */
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.buttons button {
  width:70px ;
  height:70px;
  font-size: 40px;
  border-radius: 15px;
  background-color: rgb(56, 55, 55);
  color: aliceblue;
  margin: 10px;
  place-self: center;
  /* place-self属性是justify-self（水平）和align-self（垂直）属性的简写。 */
}

.buttons .operateBtn {
  color: coral;
}

.buttons button:active {
  filter: brightness(230%);
  transition: 0.2s;
}

#delBtn {
  width: 180px;
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: rgb(56, 55, 55);
  font-size: 50px;
  padding-bottom: 10px;
}

#equalBtn {
  width: 290px;
  /* grid-column-start: 2;
  grid-column-end: 5;  */
  grid-column: 2/5;
  font-size: 60px;
  color: chartreuse;
}